<template>
    <div class="center">
        <div class="center-one">综合</div>
        <div class="center-two">价格</div>
        <div class="center-three">分类</div>
    </div>
    <div class="main">
        <div class="qiAOba">
            <div class="ficaTIon-top">
                <div class="ficaTIon-back"></div>
                <div class="ficaTIon-box">
                    <div class="ficaTIon-bottom">
                        <div class="luFei">
                            <img src="../../../../static/微信图片_20221011160228.jpg" alt="">
                            <div class="naMei">
                                <img src="../../../../static/微信图片_20221011160228.jpg" class="wuSuoPu" alt="">
                                <p>网易空气网易空气网易空气网易空气网易空气网易空气网易空气网易空气</p>
                            </div>
                            <text class="suoLong">￥79<text class="luoBin">￥99</text></text>
                            <div class="shanZhi"><text>满99减10</text></div>
                        </div>
                        <div class="luFei">
                            <img src="../../../../static/微信图片_20221011160228.jpg" alt="">
                            <div class="naMei">
                                <img src="../../../../static/微信图片_20221011160228.jpg" class="wuSuoPu" alt="">
                                <p>网易空气网易空气网易空气网易空气网易空气网易空气网易空气网易空气</p>
                            </div>
                            <text class="suoLong">￥79<text class="luoBin">￥99</text></text>
                            <div class="shanZhi"><text>满99减10</text></div>
                        </div>
                        <div class="luFei">
                            <img src="../../../../static/微信图片_20221011160228.jpg" alt="">
                            <div class="naMei">
                                <img src="../../../../static/微信图片_20221011160228.jpg" class="wuSuoPu" alt="">
                                <p>网易空气网易空气网易空气网易空气网易空气网易空气网易空气网易空气</p>
                            </div>
                            <text class="suoLong">￥79<text class="luoBin">￥99</text></text>
                            <div class="shanZhi"><text>满99减10</text></div>
                        </div>
                        <div class="luFei">
                            <img src="../../../../static/微信图片_20221011160228.jpg" alt="">
                            <div class="naMei">
                                <img src="../../../../static/微信图片_20221011160228.jpg" class="wuSuoPu" alt="">
                                <p>网易空气网易空气网易空气网易空气网易空气网易空气网易空气网易空气</p>
                            </div>
                            <text class="suoLong">￥79<text class="luoBin">￥99</text></text>
                            <div class="shanZhi"><text>满99减10</text></div>
                        </div>
                        <div class="luFei">
                            <img src="../../../../static/微信图片_20221011160228.jpg" alt="">
                            <div class="naMei">
                                <img src="../../../../static/微信图片_20221011160228.jpg" class="wuSuoPu" alt="">
                                <p>网易空气网易空气网易空气网易空气网易空气网易空气网易空气网易空气</p>
                            </div>
                            <text class="suoLong">￥79<text class="luoBin">￥99</text></text>
                            <div class="shanZhi"><text>满99减10</text></div>
                        </div>
                        <div class="luFei">
                            <img src="../../../../static/微信图片_20221011160228.jpg" alt="">
                            <div class="naMei">
                                <img src="../../../../static/微信图片_20221011160228.jpg" class="wuSuoPu" alt="">
                                <p>网易空气网易空气网易空气网易空气网易空气网易空气网易空气网易空气</p>
                            </div>
                            <text class="suoLong">￥79<text class="luoBin">￥99</text></text>
                            <div class="shanZhi"><text>满99减10</text></div>
                        </div>
                        <div class="luFei">
                            <img src="../../../../static/微信图片_20221011160228.jpg" alt="">
                            <div class="naMei">
                                <img src="../../../../static/微信图片_20221011160228.jpg" class="wuSuoPu" alt="">
                                <p>网易空气网易空气网易空气网易空气网易空气网易空气网易空气网易空气</p>
                            </div>
                            <text class="suoLong">￥79<text class="luoBin">￥99</text></text>
                            <div class="shanZhi"><text>满99减10</text></div>
                        </div>
                        <div class="luFei">
                            <img src="../../../../static/微信图片_20221011160228.jpg" alt="">
                            <div class="naMei">
                                <img src="../../../../static/微信图片_20221011160228.jpg" class="wuSuoPu" alt="">
                                <p>网易空气网易空气网易空气网易空气网易空气网易空气网易空气网易空气</p>
                            </div>
                            <text class="suoLong">￥79<text class="luoBin">￥99</text></text>
                            <div class="shanZhi"><text>满99减10</text></div>
                        </div>
                        <div class="luFei">
                            <img src="../../../../static/微信图片_20221011160228.jpg" alt="">
                            <div class="naMei">
                                <img src="../../../../static/微信图片_20221011160228.jpg" class="wuSuoPu" alt="">
                                <p>网易空气网易空气网易空气网易空气网易空气网易空气网易空气网易空气</p>
                            </div>
                            <text class="suoLong">￥79<text class="luoBin">￥99</text></text>
                            <div class="shanZhi"><text>满99减10</text></div>
                        </div>
                        <div class="luFei">
                            <img src="../../../../static/微信图片_20221011160228.jpg" alt="">
                            <div class="naMei">
                                <img src="../../../../static/微信图片_20221011160228.jpg" class="wuSuoPu" alt="">
                                <p>网易空气网易空气网易空气网易空气网易空气网易空气网易空气网易空气</p>
                            </div>
                            <text class="suoLong">￥79<text class="luoBin">￥99</text></text>
                            <div class="shanZhi"><text>满99减10</text></div>
                        </div>
                        <div class="luFei">
                            <img src="../../../../static/微信图片_20221011160228.jpg" alt="">
                            <div class="naMei">
                                <img src="../../../../static/微信图片_20221011160228.jpg" class="wuSuoPu" alt="">
                                <p>网易空气网易空气网易空气网易空气网易空气网易空气网易空气网易空气</p>
                            </div>
                            <text class="suoLong">￥79<text class="luoBin">￥99</text></text>
                            <div class="shanZhi"><text>满99减10</text></div>
                        </div>
                        <div class="luFei">
                            <img src="../../../../static/微信图片_20221011160228.jpg" alt="">
                            <div class="naMei">
                                <img src="../../../../static/微信图片_20221011160228.jpg" class="wuSuoPu" alt="">
                                <p>网易空气网易空气网易空气网易空气网易空气网易空气网易空气网易空气</p>
                            </div>
                            <text class="suoLong">￥79<text class="luoBin">￥99</text></text>
                            <div class="shanZhi"><text>满99减10</text></div>
                        </div>
                        <div class="luFei">
                            <img src="../../../../static/微信图片_20221011160228.jpg" alt="">
                            <div class="naMei">
                                <img src="../../../../static/微信图片_20221011160228.jpg" class="wuSuoPu" alt="">
                                <p>网易空气网易空气网易空气网易空气网易空气网易空气网易空气网易空气</p>
                            </div>
                            <text class="suoLong">￥79<text class="luoBin">￥99</text></text>
                            <div class="shanZhi"><text>满99减10</text></div>
                        </div>
                        <div class="luFei">
                            <img src="../../../../static/微信图片_20221011160228.jpg" alt="">
                            <div class="naMei">
                                <img src="../../../../static/微信图片_20221011160228.jpg" class="wuSuoPu" alt="">
                                <p>网易空气网易空气网易空气网易空气网易空气网易空气网易空气网易空气</p>
                            </div>
                            <text class="suoLong">￥79<text class="luoBin">￥99</text></text>
                            <div class="shanZhi"><text>满99减10</text></div>
                        </div>
                        <div class="luFei">
                            <img src="../../../../static/微信图片_20221011160228.jpg" alt="">
                            <div class="naMei">
                                <img src="../../../../static/微信图片_20221011160228.jpg" class="wuSuoPu" alt="">
                                <p>网易空气网易空气网易空气网易空气网易空气网易空气网易空气网易空气</p>
                            </div>
                            <text class="suoLong">￥79<text class="luoBin">￥99</text></text>
                            <div class="shanZhi"><text>满99减10</text></div>
                        </div>
                        <div class="luFei">
                            <img src="../../../../static/微信图片_20221011160228.jpg" alt="">
                            <div class="naMei">
                                <img src="../../../../static/微信图片_20221011160228.jpg" class="wuSuoPu" alt="">
                                <p>网易空气网易空气网易空气网易空气网易空气网易空气网易空气网易空气</p>
                            </div>
                            <text class="suoLong">￥79<text class="luoBin">￥99</text></text>
                            <div class="shanZhi"><text>满99减10</text></div>
                        </div>
                        <div class="luFei">
                            <img src="../../../../static/微信图片_20221011160228.jpg" alt="">
                            <div class="naMei">
                                <img src="../../../../static/微信图片_20221011160228.jpg" class="wuSuoPu" alt="">
                                <p>网易空气网易空气网易空气网易空气网易空气网易空气网易空气网易空气</p>
                            </div>
                            <text class="suoLong">￥79<text class="luoBin">￥99</text></text>
                            <div class="shanZhi"><text>满99减10</text></div>
                        </div>  <div class="luFei">
                            <img src="../../../../static/微信图片_20221011160228.jpg" alt="">
                            <div class="naMei">
                                <img src="../../../../static/微信图片_20221011160228.jpg" class="wuSuoPu" alt="">
                                <p>网易空气网易空气网易空气网易空气网易空气网易空气网易空气网易空气</p>
                            </div>
                            <text class="suoLong">￥79<text class="luoBin">￥99</text></text>
                            <div class="shanZhi"><text>满99减10</text></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">

</script>

<style scoped>

.search{
    height: 40px;
}

.header{
    margin-bottom: 10px;
}

.center{
    background-color: #eee;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
}
.ficaTIon-top {
    background-color: #fff;
    display: flex;
    justify-content: center;
    height: 30px;
}

.ficaTIon-fiexd {
    position: fixed;
}

.ficaTIon-top text {
    font-size: 14px;
    line-height: 30px;
    text-align: center;
    color: #f00;
}

/* 修改vant基础样式 */
:deep(.van-tabs__line) {
    border-bottom: 1px solid red !important;
    background: #fff;
    border-radius: 0%;
    bottom: 25px;
    /* buttom: 22px; */
}

.active {
    border-bottom: 1upx solid #f00
}

.ficaTIon-box {
    margin-top: -20px;
}

.ficaTIon-bottom {
    margin-top: 30px;
    background-color: #fff;
}
.center{
    display: flex;
    justify-content: space-around;
}
.ficaTIon-back {
    height: 12px;
    background-color: #eee;
}

.luFei {
    width: 150px;
    float: left;
    margin: 15px;
}

.luFei>img {
    width: 160px;
    height: 160px;
    border-radius: 10px;
}

.naMei img {
    width: 10px;
    height: 10px;
}

.suoLong {
    color: red;
    font-size: 18px;
}

.wuSuoPu {
    width: 10px;
    height: 10px;
    float: left;
}

.shENping {
    font-size: 10px;
}

.luoBin {
    color: rgb(153, 153, 153);
    text-decoration: line-through
}

.shanZhi {
    background-color: rgb(255, 233, 235);
    ;
    border-radius: 10px;
}

.shanZhi>text {
    font-size: 8px;
}</style>